<template>
    <div class="content">
        <div class="login-content">
            <div class="login-title">
                <span>{{title}}</span>
            </div>
            <div class="login-form">
                <el-form ref="ruleFormRef" :model="form" :rules="rules">
                    <el-form-item>
                        <el-input v-model="form.name" :prefix-icon="User" placeholder="请输入登录名"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.password" type="password" :prefix-icon="Lock" placeholder="请输入密码" @keyup.enter.native="login"/>
                    </el-form-item>
                    <el-checkbox v-model="form.rememberMe" class="login-rememberMe">记住密码</el-checkbox>
                    <div class="login-button">
                        <el-button type="success" @click="login(ruleFormRef)">登 陆</el-button>
                    </div>
                    <div class="login-register">
                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
                    </div>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import {ref,reactive} from 'vue'
    import { useRouter} from 'vue-router'
    import { userStoreHook } from '../../store/modules/user'
    import {User,Lock} from '@element-plus/icons-vue'
    import webUtils from '../../config/index'

    const title = webUtils.title;
    const form = ref({
        name:'admin',
        password:'admin',
        rememberMe:false,
    });
    const ruleFormRef = ref();
    const rules = reactive({
        name: [{required: true, message: '请输入登录名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},]
    });
    const router = useRouter();
    const userStore = userStoreHook();

    const login = (formEl)=>{
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            if (valid) {
                userStore.userInfo.isLogin = true;
                userStore.userInfo.token = '111111111';
                router.push('/');
            }
        })
    };




</script>

<style lang="scss" scoped>
    .content{
        width: 100%;
        height: $web-height;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../../assets/img/login/bg.jpg");
        background-size: cover;
    }
    .login-content{
        width: 450px;
        height: 40%;
        background-color:$main-background-color;
        border-radius: 20px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
    }
    .login-title{
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            font-size:25px;
            font-weight: 600;

        }
    }
    .login-form{
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-input{
            width: 350px;
            height: 38px;
        }
        .login-rememberMe{
            margin:0px 0px 25px 0px;
            float: left;
        }
        .login-register{
            float: right;
            margin-top: 10px;
        }
    }
    .login-button{
        margin-top: 35px;
        .el-button--success{
            width: 350px;
            background-color: #39c5bb;
        }
    }
    .link-type,.link-type:focus {
        color: #337ab7;
        cursor: pointer;
        &:hover {
             color: rgb(32, 160, 255);
         }
    }
</style>